<template>
	<view class="placeholder" :style="[placeholderStyle]">
	</view>
</template>
<!-- <m-bottom-paceholder></m-bottom-paceholder> -->
<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue"
	
	const props = defineProps({
		height: {
			type: [String,Number],
			default: '30'
		}
	})
	
	let placeholderStyle = computed(() => {
		const style = {}
		style.height = `${props.height}rpx`
		 // #ifndef MP-WEIXIN
		 	const {
		 		safeAreaInsets
		 	} = uni.getSystemInfoSync()
		 style.paddingBottom = `${safeAreaInsets.bottom}px`
		// #endif
		return style;
	})
</script>

<style lang="scss" scoped>
	.placeholder {
		width: 100%;
		height: 20rpx;
		/* #ifdef MP-WEIXIN*/
		 padding-bottom: 0;
		 padding-bottom: constant(safe-area-inset-bottom); //适配底部
		 padding-bottom: env(safe-area-inset-bottom);
		/*#endif*/
	
	}

</style>